         <template lang="html" >
    <div id="local_info">
        <mt-index-list>
            <mt-index-section index="当前">
                <div  @click="chosed('广州')">
                    <mt-cell title="广州"></mt-cell>
                </div>
           </mt-index-section>
           <mt-index-section index="热门">
               <div v-for="item in hot_city"  @click="chosed(item)">
                   <mt-cell :title="item"></mt-cell>
               </div>
            </mt-index-section>

            <!-- 循环输出城市名 -->
            <mt-index-section :index="item" v-for="item in amber" >
                <div v-for="i in info" @click="chosed(i.name)">
                    <mt-cell  v-if="i.pinyin[0]==item" :title="i.name" ></mt-cell>
                </div>
            </mt-index-section>


        </mt-index-list>
    </div>
</template>

<script>
// 引入axios插件
import axios from "axios";

export default {
    data: function() {
        return {
            info: [],
            hot_city:['北京','上海','深圳','广州','成都','武汉','杭州','重庆'],
            amber: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "X", "Y", "Z"]
        }
    },

    created() {
        var that = this;

        // 当index被引入渲染时，就开始发起请求
        axios.get("https://m.maizuo.com/v4/api/city").then(function(res) {
            that.info = res.data.data.cities;
            // console.log(that.info);
        }).catch(function(err) {
            console.warn(err);
        })
    },

    methods:{
        chosed:function(get_name){
              this.$emit('send_msg',get_name);
        }
    },
}
</script>

<style lang="scss">
#local_info {
    position: fixed;
    width: 100vw;
    height: 100vw;
    color: #777;
}
</style>
